<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
			<el-form-item label="单据号" prop="serialNo">
				<el-input v-model="queryParams.serialNo" placeholder="请输入单据号" clearable @keyup.enter="handleQuery" />
			</el-form-item>
			<el-form-item label="业务类型" prop="bizType">
				<el-select v-model="queryParams.bizType" placeholder="请选择业务类型" clearable>
					<el-option v-for="dict in event_type" :key="dict.value" :label="dict.label" :value="dict.value" />
				</el-select>
			</el-form-item>
			<el-form-item label="客户编号" prop="customerId">
				<el-select v-model="queryParams.customerId" placeholder="请选择客户编号" clearable>
					<el-option v-for="item in  customerIdQuery" :key="item.dictValue" :label="item.dictLabel"
						:value="item.dictValue" />
				</el-select>
			</el-form-item>
			<el-form-item label="合同类型" prop="contractType">
				<el-select v-model="queryParams.contractType" placeholder="请选择合同类型" clearable>
					<el-option v-for="dict in contract_type" :key="dict.value" :label="dict.label"
						:value="dict.value" />
				</el-select>
			</el-form-item>
			<el-form-item label="申请人" prop="applyUser">
				<el-select v-model="queryParams.applyUser" placeholder="请选择申请人" clearable>
					<el-option v-for="item in  applyUserQuery" :key="item.dictValue" :label="item.dictLabel"
						:value="item.dictValue" />
				</el-select>
			</el-form-item>
			<el-form-item label="申请日期" style="width: 308px">
				<el-date-picker v-model="daterangeApplyTime" value-format="YYYY-MM-DD" type="daterange"
					range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
			</el-form-item>
			<el-form-item label="申请状态" prop="applyStatus">
				<el-select v-model="queryParams.applyStatus" placeholder="请选择申请状态" clearable>
					<el-option v-for="dict in apply_status" :key="dict.value" :label="dict.label" :value="dict.value" />
				</el-select>
			</el-form-item>
			<el-form-item label="审核人" prop="auditUser">
				<el-select v-model="queryParams.auditUser" placeholder="请选择审核人" clearable>
					<el-option v-for="item in  auditUserQuery" :key="item.dictValue" :label="item.dictLabel"
						:value="item.dictValue" />
				</el-select>
			</el-form-item>
			<el-form-item label="审核日期" style="width: 308px">
				<el-date-picker v-model="daterangeAuditTime" value-format="YYYY-MM-DD" type="daterange"
					range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
			</el-form-item>
			<el-form-item label="审核状态" prop="auditStatus">
				<el-select v-model="queryParams.auditStatus" placeholder="请选择审核状态" clearable>
					<el-option v-for="dict in audit_status" :key="dict.value" :label="dict.label" :value="dict.value" />
				</el-select>
			</el-form-item>
			<el-form-item label="单据状态" prop="billStatus">
				<el-select v-model="queryParams.billStatus" placeholder="请选择单据状态" clearable>
					<el-option v-for="dict in out_warehouse_status" :key="dict.value" :label="dict.label"
						:value="dict.value" />
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
				<el-button icon="Refresh" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>

		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['scm:apply:add']">新增
				</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate"
					v-hasPermi="['scm:apply:edit']">修改
				</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete"
					v-hasPermi="['scm:apply:remove']">删除
				</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="warning" plain icon="Download" @click="handleExport"
					v-hasPermi="['scm:apply:export']">导出
				</el-button>
			</el-col>
			<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
		</el-row>

		<el-table v-loading="loading" :data="applyList" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" align="center" />
			<el-table-column label="编号" align="center" prop="id" />
			<el-table-column label="单据号" align="center" prop="serialNo" />
			<el-table-column label="客户编号" align="center" prop="customerId" :formatter="customerIdFormat" />
			<el-table-column label="状态" align="center" prop="applyType">
				<template #default="scope">
					<dict-tag :options="scm_out_warehouse_status" :value="scope.row.applyType" />
				</template>
			</el-table-column>
			<el-table-column label="申请人" align="center" prop="applyUser" :formatter="applyUserFormat" />
			<el-table-column label="申请日期" align="center" prop="applyTime" width="180">
				<template #default="scope">
					<span>{{ parseTime(scope.row.applyTime, '{y}-{m}-{d}') }}</span>
				</template>
			</el-table-column>
			<el-table-column label="申请状态" align="center" prop="applyStatus">
				<template #default="scope">
					<dict-tag :options="apply_status" :value="scope.row.applyStatus" />
				</template>
			</el-table-column>
			<el-table-column label="审核人" align="center" prop="auditUser" :formatter="auditUserFormat" />
			<el-table-column label="审核日期" align="center" prop="auditTime" width="180">
				<template #default="scope">
					<span>{{ parseTime(scope.row.auditTime, '{y}-{m}-{d}') }}</span>
				</template>
			</el-table-column>
			<el-table-column label="审核状态" align="center" prop="auditStatus">
				<template #default="scope">
					<dict-tag :options="audit_status" :value="scope.row.auditStatus" />
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
				<template #default="scope">
					<el-button v-if="scope.row.applyStatus==0 " link type="primary" icon="Edit"
						@click="handleUpdate1(scope.row)" v-hasPermi="['scm:apply:edit']">修改
					</el-button>
					<el-button v-if="scope.row.applyStatus==0 " link type="primary" icon="Delete"
						@click="handleDelete(scope.row)" v-hasPermi="['scm:apply:remove']">删除
					</el-button>
					<el-button v-else="scope.row.applyStatus==1" link type="primary" icon="Edit"
						@click="handleUpdate(scope.row)" v-hasPermi="['scm:apply:edit']">修改
					</el-button>
				</template>
			</el-table-column>
		</el-table>

		<pagination v-show="total>0" :total="total" v-model:page="queryParams.pageNum"
			v-model:limit="queryParams.pageSize" @pagination="getList" />

		<!-- 添加或修改出库申请对话框 -->
		<el-dialog :title="title" v-model="open" width="1000px" append-to-body>
			<el-form ref="applyRef" :model="form" :rules="rules" label-width="80px">
				<el-form-item label="单据号" prop="serialNo">
					<el-input v-model="form.serialNo" placeholder="请输入单据号" :disabled="isDisabled" />
				</el-form-item>
				<el-form-item label="业务类型" prop="bizType">
					<el-select v-model="form.bizType" placeholder="请选择业务类型" :disabled="isDisabled">
						<el-option v-for="dict in event_type" :key="dict.value" :label="dict.label"
							:value="dict.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="客户编号" prop="customerId">
					<el-select v-model="form.customerId" placeholder="请选择客户编号" clearable :disabled="isDisabled">
						<el-option v-for="item in  customerIdQuery" :key="item.dictValue" :label="item.dictLabel"
							:value="item.dictValue" />
					</el-select>
				</el-form-item>
				<el-form-item label="合同编号" prop="contractId">
					<el-input v-model="form.contractId" placeholder="请输入合同编号" :disabled="isDisabled" />
				</el-form-item>
				<el-form-item label="合同类型" prop="contractType">
					<el-select v-model="form.contractType" placeholder="请选择合同类型" :disabled="isDisabled">
						<el-option v-for="dict in contract_type" :key="dict.value" :label="dict.label"
							:value="dict.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="审核意见" prop="auditComment">
					<el-input v-model="form.auditComment" placeholder="请输入审核意见" :disabled="isDisabled" />
				</el-form-item>
				<el-form-item label="备注" prop="remark">
					<el-input v-model="form.remark" placeholder="请输入备注" :disabled="isDisabled" />
				</el-form-item>
				<el-divider content-position="center">出库申请明细信息</el-divider>
				<el-row :gutter="10" class="mb8">
					<el-col :span="1.5">
						<el-button type="primary" icon="Plus" :disabled="isDisabled"
							@click="handleAddWmsOutWarehouseApplyDetail">添加</el-button>
					</el-col>
					<el-col :span="1.5">
						<el-button type="danger" icon="Delete" :disabled="isDisabled"
							@click="handleDeleteWmsOutWarehouseApplyDetail">删除</el-button>
					</el-col>
				</el-row>
				<el-table :data="wmsOutWarehouseApplyDetailList" :row-class-name="rowWmsOutWarehouseApplyDetailIndex"
					@selection-change="handleWmsOutWarehouseApplyDetailSelectionChange"
					ref="wmsOutWarehouseApplyDetail">
					<el-table-column type="selection" width="50" align="center" />
					<el-table-column label="序号" align="center" prop="index" width="50" />
					<el-table-column label="物料" prop="materialId" width="250">
						<template #default="scope">
							<el-input v-model="scope.row.materialName" placeholder="请选择物料" clearable
								disabled>
								<template #append><el-button slot="append"
										@click="OpenMateria(scope.$index)" :disabled="isDisabled">选择</el-button></template>
							</el-input>
						</template>
					</el-table-column>
					<el-table-column label="仓库" prop="warehouseId" width="180">
						<template #default="scope">
							<el-select v-model="scope.row.warehouseId" placeholder="请选择仓库" clearable
								:disabled="isDisabled">
								<el-option v-for="item in  warehouseIdQuery" :key="item.dictValue"
									:label="item.dictLabel" :value="item.dictValue" />
							</el-select>
						</template>
					</el-table-column>
					<el-table-column label="库位" prop="whLocationId" width="180">
						<template #default="scope">
							<el-select v-model="scope.row.whLocationId" placeholder="请选择库位" clearable
								:disabled="isDisabled">
								<el-option v-for="item in  whLocationIdQuery" :key="item.dictValue"
									:label="item.dictLabel" :value="item.dictValue" />
							</el-select>
						</template>
					</el-table-column>
					<el-table-column label="库区" prop="whRegionId" width="180">
						<template #default="scope">
							<el-select v-model="scope.row.whRegionId" placeholder="请选择库区" clearable
								:disabled="isDisabled">
								<el-option v-for="item in  whRegionIdQuery" :key="item.dictValue"
									:label="item.dictLabel" :value="item.dictValue" />
							</el-select>

						</template>
					</el-table-column>
					<el-table-column label="发货数量" prop="outQuantity" width="150">
						<template #default="scope">
							<el-input v-model="scope.row.outQuantity" placeholder="请输入发货数量" :disabled="isDisabled">

							</el-input>
						</template>
					</el-table-column>
					<el-table-column label="序列号" prop="serialNo" width="150">
						<template #default="scope">
							<el-input v-model="scope.row.serialNo" placeholder="请输入序列号" :disabled="isDisabled" />
						</template>
					</el-table-column>
					<el-table-column label="生产批号" prop="batchNo" width="150">
						<template #default="scope">
							<el-input v-model="scope.row.batchNo" placeholder="请输入生产批号" :disabled="isDisabled" />
						</template>
					</el-table-column>
					<el-table-column label="生产日期" prop="productDate" width="240">
						<template #default="scope">
							<el-date-picker clearable v-model="scope.row.productDate" type="date" :disabled="isDisabled"
								value-format="YYYY-MM-DD" placeholder="请选择生产日期">
							</el-date-picker>
						</template>
					</el-table-column>
					<el-table-column label="生产单位" prop="manufacturer" width="150">
						<template #default="scope">
							<el-input v-model="scope.row.manufacturer" placeholder="请输入生产单位" :disabled="isDisabled" />
						</template>
					</el-table-column>
				</el-table>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button type="primary" plain @click="submitForm" :disabled="isDisabled">保存</el-button>
					<el-button type="warning" plain @click="submitForm1" :disabled="isDisabled">提交</el-button>
					<el-button @click="cancel">取 消</el-button>
				</div>
			</template>
		</el-dialog>
		<MaterialSelect :open="openMateria" @onCancel="handleMaterialCancel" @onSelected="handleMaterialSelected">
		</MaterialSelect>
	</div>
</template>

<script setup name="Apply">
	import {
		listApply,
		getApply,
		delApply,
		addApply,
		updateApply,
		exportApply
	} from "@/api/scm/apply";
	import {
		ElMessageBox
	} from 'element-plus'
	import {
		ref
	} from "vue";
	import MaterialSelect from "@/components/Material/MaterialSelect"
	const {
		proxy
	} = getCurrentInstance();







	const {
		event_type
	} = proxy.useDict('event_type')


	const customerIdQuery = ref([])
	proxy.getQueryData("query_customer").then(res => {
		customerIdQuery.value = res.data
	})
	const customerIdFormat = (row, column) => {
		return proxy.selectDictLabel(customerIdQuery.value, row.customerId);
	}

	function OpenMateria(index) {
		openMateria.value = true;
		jishu.value=index
	}

	function handleMaterialCancel() {
		openMateria.value = false;
	}

	function handleMaterialSelected(row) {
		console.log(row[0])
		wmsOutWarehouseApplyDetailList.value[jishu.value].materialId = row[0].id //物料id
		// wmsOutWarehouseApplyDetailList.value[jishu.value].materialName = row[0].name //物料名称
		// wmsOutWarehouseApplyDetailList.value[jishu.value].warehouseId = row[0].categoryId //仓库
		// wmsOutWarehouseApplyDetailList.value[jishu.value].whLocationId = row[0].categoryId //库区
		// wmsOutWarehouseApplyDetailList.value[jishu.value].whRegionId = row[0].categoryId //库位
		wmsOutWarehouseApplyDetailList.value[jishu.value].productDate = row[0].createTime //生产日期
		wmsOutWarehouseApplyDetailList.value[jishu.value].manufacturer=row[0].price 


		// serialNo batchNo productDate manufacturer
		// console.log(row[0].name)
		openMateria.value = false;
	}



	const {
		contract_type
	} = proxy.useDict('contract_type')


	const {
		scm_out_warehouse_status
	} = proxy.useDict('scm_out_warehouse_status')


	const applyUserQuery = ref([])
	proxy.getQueryData("query_user").then(res => {
		applyUserQuery.value = res.data
	})
	const applyUserFormat = (row, column) => {
		return proxy.selectDictLabel(applyUserQuery.value, row.applyUser);
	}




	const {
		apply_status
	} = proxy.useDict('apply_status')


	const auditUserQuery = ref([])
	proxy.getQueryData("query_user").then(res => {
		auditUserQuery.value = res.data
	})
	const auditUserFormat = (row, column) => {
		return proxy.selectDictLabel(auditUserQuery.value, row.auditUser);
	}




	const {
		audit_status
	} = proxy.useDict('audit_status')






	const {
		out_warehouse_status
	} = proxy.useDict('out_warehouse_status')


	const materialIdQuery = ref([])
	proxy.getQueryData("query_material").then(res => {
		materialIdQuery.value = res.data
	})
	const warehouseIdQuery = ref([])
	proxy.getQueryData("query_warehouse").then(res => {
		warehouseIdQuery.value = res.data
	})
	const whLocationIdQuery = ref([])
	proxy.getQueryData("query_location").then(res => {
		whLocationIdQuery.value = res.data
	})
	const whRegionIdQuery = ref([])
	proxy.getQueryData("query_region").then(res => {
		whRegionIdQuery.value = res.data
	})

	const applyList = ref([]);
	const wmsOutWarehouseApplyDetailList = ref([]);
	const open = ref(false);
	const loading = ref(true);
	const showSearch = ref(true);
	const ids = ref([]);
	const checkedWmsOutWarehouseApplyDetail = ref([]);
	const single = ref(true);
	const multiple = ref(true);
	const openMateria = ref(false);
	const total = ref(0);
	const jishu = ref(0);
	const title = ref("");
	const isDisabled = ref(true);
	const daterangeApplyTime = ref([]);
	const daterangeAuditTime = ref([]);
	const data = reactive({
		form: {},
		queryParams: {
			pageNum: 1,
			pageSize: 10,
			serialNo: null,
			bizType: null,
			customerId: null,
			contractType: null,
			applyUser: null,
			applyTime: null,
			applyStatus: null,
			auditUser: null,
			auditTime: null,
			auditStatus: null,
			billStatus: null
		},
		rules: {}
	});

	const {
		queryParams,
		form,
		rules
	} = toRefs(data);

	/** 查询出库申请列表 */
	function getList() {
		loading.value = true;
		queryParams.value.params = {};
		if (null != daterangeApplyTime && '' != daterangeApplyTime) {
			queryParams.value.params["beginApplyTime"] = daterangeApplyTime.value[0];
			queryParams.value.params["endApplyTime"] = daterangeApplyTime.value[1];
		}
		if (null != daterangeAuditTime && '' != daterangeAuditTime) {
			queryParams.value.params["beginAuditTime"] = daterangeAuditTime.value[0];
			queryParams.value.params["endAuditTime"] = daterangeAuditTime.value[1];
		}
		listApply(queryParams.value).then(response => {
			applyList.value = response.rows;
			total.value = response.total;
			loading.value = false;
		});
	}

	// 取消按钮
	function cancel() {
		open.value = false;
		reset();
	}

	// 表单重置
	function reset() {
		form.value = {
			id: null,
			serialNo: null,
			bizBillId: null,
			bizType: null,
			customerId: null,
			contractId: null,
			contractType: null,
			applyType: null,
			applyUser: null,
			applyTime: null,
			applyStatus: null,
			auditUser: null,
			auditTime: null,
			auditStatus: null,
			auditComment: null,
			remark: null,
			billStatus: null
		};
		wmsOutWarehouseApplyDetailList.value = [];
		proxy.resetForm("applyRef");
	}

	/** 搜索按钮操作 */
	function handleQuery() {
		queryParams.value.pageNum = 1;
		getList();
	}

	/** 重置按钮操作 */
	function resetQuery() {
		daterangeApplyTime.value = [];
		daterangeAuditTime.value = [];
		proxy.resetForm("queryRef");
		handleQuery();
	}

	// 多选框选中数据
	function handleSelectionChange(selection) {
		ids.value = selection.map(item => item.id);
		single.value = selection.length != 1;
		multiple.value = !selection.length;
	}

	/** 新增按钮操作 */
	function handleAdd() {
		reset();
		open.value = true;
		title.value = "添加出库申请";
	}

	/** 修改按钮操作 */
	function handleUpdate(row) {
		reset();
		const _id = row.id || ids.value
		getApply(_id).then(response => {
			form.value = response.data;
			wmsOutWarehouseApplyDetailList.value = response.data.wmsOutWarehouseApplyDetailList;
			open.value = true;
			title.value = "修改出库申请";
		});
	}


	function handleUpdate1(row) {
		reset();
		isDisabled.value = false;
		const _id = row.id || ids.value
		getApply(_id).then(response => {
			form.value = response.data;
			wmsOutWarehouseApplyDetailList.value = response.data.wmsOutWarehouseApplyDetailList;
			open.value = true;
			title.value = "修改出库申请";
		});
	}


	function submitForm() {
		proxy.$refs["applyRef"].validate(valid => {
			form.value.applyStatus = 0;
			if (valid) {
				form.value.wmsOutWarehouseApplyDetailList = wmsOutWarehouseApplyDetailList.value;
				if (form.value.id != null) {
					updateApply(form.value).then(response => {
						proxy.$modal.msgSuccess("修改成功");
						open.value = false;
						getList();
					});
				} else {
					addApply(form.value).then(response => {
						proxy.$modal.msgSuccess("新增成功");
						open.value = false;
						getList();
					});
				}
			}
		});
	}

	function submitForm1() {
		proxy.$refs["applyRef"].validate(valid => {
			form.value.applyStatus = 1;
			if (valid) {
				form.value.wmsOutWarehouseApplyDetailList = wmsOutWarehouseApplyDetailList.value;
				if (form.value.id != null) {
					updateApply(form.value).then(response => {
						proxy.$modal.msgSuccess("修改成功");
						open.value = false;
						getList();
					});
				} else {
					addApply(form.value).then(response => {
						proxy.$modal.msgSuccess("新增成功");
						open.value = false;
						getList();
					});
				}
			}
		});
	}

	/** 删除按钮操作 */
	function handleDelete(row) {
		const _ids = row.id || ids.value;
		proxy.$modal.confirm('是否确认删除出库申请编号为"' + _ids + '"的数据项？').then(function() {
			return delApply(_ids);
		}).then(() => {
			getList();
			proxy.$modal.msgSuccess("删除成功");
		}).catch(() => {});
	}

	/** 出库申请明细序号 */
	function rowWmsOutWarehouseApplyDetailIndex({
		row,
		rowIndex
	}) {
		row.index = rowIndex + 1;
	}

	/** 出库申请明细添加按钮操作 */
	function handleAddWmsOutWarehouseApplyDetail() {
		let obj = {};
		obj.materialId = "";
		obj.warehouseId = "";
		obj.whLocationId = "";
		obj.whRegionId = "";
		obj.outQuantity = "";
		obj.serialNo = "";
		obj.batchNo = "";
		obj.productDate = "";
		obj.manufacturer = "";
		wmsOutWarehouseApplyDetailList.value.push(obj);
	}

	/** 出库申请明细删除按钮操作 */
	function handleDeleteWmsOutWarehouseApplyDetail() {
		if (checkedWmsOutWarehouseApplyDetail.value.length == 0) {
			proxy.$modal.msgError("请先选择要删除的出库申请明细数据");
		} else {
			const wmsOutWarehouseApplyDetails = wmsOutWarehouseApplyDetailList.value;
			const checkedWmsOutWarehouseApplyDetails = checkedWmsOutWarehouseApplyDetail.value;
			wmsOutWarehouseApplyDetailList.value = wmsOutWarehouseApplyDetails.filter(function(item) {
				return checkedWmsOutWarehouseApplyDetails.indexOf(item.index) == -1
			});
		}
	}

	/** 复选框选中数据 */
	function handleWmsOutWarehouseApplyDetailSelectionChange(selection) {
		checkedWmsOutWarehouseApplyDetail.value = selection.map(item => item.index)
	}

	/** 导出按钮操作 */
	function handleExport() {
		ElMessageBox.confirm('是否确认导出所有出库申请数据项?', "警告", {
			confirmButtonText: "确定",
			cancelButtonText: "取消",
			type: "warning"
		}).then(function() {
			return exportApply(val).then(res => {
				proxy.download(res.msg);
			});
		})
	}

	getList();
</script>